<template>
  <div>
    <el-row :gutter="10">
      <!-- 省 -->
      <el-col :span="5">
         <el-select v-model="pickerValue.provinceValue" placeholder="请选择" @change="getCityData">
    <el-option
      v-for="item in optionData.provinceData"
      :key="item.PROVINCE_ID"
      :label="item.PROVINCE_NAME"
      :value="item.PROVINCE_CODE">
    </el-option>
  </el-select>
      </el-col>
      <!-- 市 -->
       <el-col :span="5" v-if="optional.options.includes('city')">
         <el-select v-model="pickerValue.cityValue" placeholder="请选择" @change="getAreaData">
    <el-option
      v-for="item in optionData.cityData"
      :key="item.CITY_ID"
      :label="item.CITY_NAME"
      :value="item.CITY_CODE">
    </el-option>
  </el-select>
      </el-col>
      <!-- 区 -->
       <el-col :span="5" v-if="optional.options.includes('area')">
         <el-select v-model="pickerValue.areaValue" placeholder="请选择" @change="getStreetData">
    <el-option
      v-for="item in optionData.areaData"
      :key="item.AREA_ID"
      :label="item.AREA_NAME"
      :value="item.AREA_CODE">
    </el-option>
  </el-select>
      </el-col>
      <!-- 街  -->
       <el-col :span="5" v-if="optional.options.includes('street')">
         <el-select v-model="pickerValue.streetValue" placeholder="请选择" >
    <el-option
      v-for="item in optionData.streetData"
      :key="item.STREET_ID"
      :label="item.STREET_NAME"
      :value="item.STREET_CODE">
    </el-option>
  </el-select>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import cityPicker from '@/mixins/cityPicker'
import { onBeforeMount, watch, reactive } from '@vue/composition-api'
export default {
  props: {
    cityPickerValue: {
      type: Object,
      default: () => {}
    },
    option: {
      type: Number,
      default: 3
    }
  },
  setup (props, { emit }) {
    // 导入配置数据与选择框选值模块
    const { optionData, pickerValue, getProvinceData, getCityData, getAreaData, getStreetData } = cityPicker()
    // 初始化配置
    const optional = reactive({
      options: ['city', 'area', 'street']
    })
    const initOption = () => {
      if (props.option > 3 || props.option < 0) return
      optional.options = optional.options.filter((item, index) => index < props.option)
    }
    // 返回出去选中值
    watch(pickerValue, () => {
      emit('update:cityPickerValue', pickerValue)
    })
    // 完全重置
    const reset = () => {
      for (const key in optionData) {
        if (key === 'provinceData') continue
        optionData[key] = []
      }
      for (const key in pickerValue) {
        pickerValue[key] = ''
      }
    }
    // 生命周期
    onBeforeMount(() => {
      initOption()
      getProvinceData()
    })
    return {
      optionData,
      pickerValue,
      getCityData,
      getAreaData,
      getStreetData,
      optional,
      reset
    }
  }
}
</script>

<style>

</style>
